<template>
  <Card title="编排设置">
    <Draggable
      class="draggable"
      :list="list"
      v-bind="dragOptions"
      group="draggable"
    >
      <div v-for="(item, index) in list" :key="item.id" class="inner">
        <div class="out-box" v-if="!item.children">
          <div class="box">
            {{ item.label }}
          </div>
          <i class="el-icon-right" v-if="index !== list.length - 1"></i>
        </div>
        <Draggable
          v-else
          class="draggable-a"
          :list="item.children"
          v-bind="dragOptions"
          group="draggable"
        >
          <div
            class="out-box"
            v-for="(itemA, indexA) in item.children"
            :key="itemA.id"
          >
            <div class="box">
              {{ itemA.label }}
            </div>
            <i class="el-icon-right" v-if="indexA === 0"></i>
          </div>
        </Draggable>
      </div>
    </Draggable>
  </Card>
</template>

<script>
import Draggable from 'vuedraggable'
import Card from '@/components/Card'
export default {
  components: {
    Card,
    Draggable
  },

  data() {
    return {
      list: [
        { id: 0, label: 'a-product' },
        {
          id: 1,
          children: [
            { id: 0, label: 'b-product' },
            { id: 1, label: 'c-product' },
            { id: 2, label: 'd-product' }
          ]
        },
        { id: 2, label: 'f-product' },
        { id: 3, label: 'g-product' }
      ],
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      }
    }
  },

  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.draggable {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  .out-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    margin: 20px;
  }
  i {
    font-size: 22px;
    margin-left: 1.5vw;
  }
}
</style>
